<template>
  <div>
    <div class="top-header">
      <div class="header-title">
        听写我帮忙<sub>《后台管理》</sub>
      </div>
    </div>
    <div class="form-dlg display-flex">
      <el-form label-width="100px" class="item-flex">
        <div class="title">
          登录
        </div>
        <el-form-item label="登录名" required v-valid="modelData.valid.username">
          <el-input v-model="modelData.username" autofocus="true" placeholder="请输入登录名"></el-input>
          <slot name="error">
            <form-error :info="modelData.valid.username"/>
          </slot>
        </el-form-item>
        <el-form-item label="登录密码" required v-valid="modelData.valid.pwd">
          <el-input type="password" v-model="modelData.pwd" placeholder="请输入登录密码"></el-input>
          <slot name="error"><form-error :info="modelData.valid.pwd"/></slot>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="split-line">

      </div>
      <div class="item-flex">
        <div>此平台账号获取需要与地方代理商联系</div>
        <div>可扫二维码微信登录</div>
      </div>
    </div>
    <div class="bottom-desc">
      <div>杭州塔沙信息科技有限公司</div>
      Copyright © 20016-2022 杭州塔沙 tarsadata.com版权所有
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import * as module from "../index.model";

export default Vue.proxyVue({
  module,
  init(initData) {
    return {
      modelData: initData
    };
  },
  methods: {
    reset() {
      this.modelData.username = "";
      this.modelData.pwd = "";
      this.modelData.valid = {};
    },
    async login() {
      const resp = await this.trigger.login();
      if (resp == null) {
        window.location.href = "./main.html";
      } else {
        this.$message({ type: "error", message: `登陆失败:${resp}` });
      }
    }
  }
});
</script>

<style lang="less" scoped>
@import "~theme.less";
.header-title {
  width: 1024px;
}
.form-dlg {
  box-shadow: 0 0 18px 0 rgba(57, 141, 238, 0.12);
  border-radius: 18px;
  width: 800px;
  margin: 150px auto 0;
  > .item-flex {
    padding: 25px;
  }
  .title {
    text-align: center;
    font-size: 22px;
    line-height: 43px;
  }
  .split-line {
    border-left: 1px solid #dcdfe6;
    margin: 20px;
  }
}
.bottom-desc {
  text-align: center;
  position: fixed;
  bottom: 20px;
  width: 100%;
  color: #999999;
  font-size: 12px;
  div {
    color: #333333;
  }
}
</style>
